<template>
  <div id="compBarRef" class="comp-sty"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: {
    categoryData: {
      type: Array,
      default: () => {
        return []
      }
    },
    firstSevDayData: {
      type: Array,
      default: () => {
        return []
      }
    },
    SecondSevDayData: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      myChart: null,
      chartDom: null
    }
  },
  computed: {
    bothArraysHaveValues() {
      return this.categoryData.length > 0 && this.firstSevDayData.length > 0 && this.SecondSevDayData.length > 0;
    }
  },
  watch: {
    bothArraysHaveValues(newValue, oldValue) {
      if (newValue && !oldValue) {
        const option = {
          tooltip: {
            show: true
          },
          animation: false,//关闭加载动画
          grid: {
            show: false,
            top: "15%",
            left: "0%",
            bottom: "15%"
          },
          xAxis: {
            type: 'category',
            data: this.categoryData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            show: false
          },
          series: [
            {
              barMinHeight: 10,
              barWidth: 18,
              data: this.firstSevDayData,
              type: 'bar',
              stack: 'a',
              name: '1级',
              // 取消鼠标移入高亮
              emphasis: {
                disabled: true,
                focus: 'none'
              }
            },
            {
              barWidth: 18,
              data: this.SecondSevDayData,
              type: 'bar',
              stack: 'a',
              name: '2级',
              // 取消鼠标移入高亮
              emphasis: {
                disabled: true,
                focus: 'none'
              }
            }
          ]
        };
        this.myChart.setOption(option);
      }
    }
  },
  mounted() {
    // 获取DOM元素，初始化Echarts图表对象，但不设置数据
    this.chartDom = document.getElementById('compBarRef');
    this.myChart = echarts.init(this.chartDom);
  }
}
</script>

<style lang="less" scoped>
.comp-sty {
  width: 100%;
  height: 100%;
}
</style>